import React, { Component } from 'react';
import { Button, message, Input } from 'antd';
import { getUrlParams } from 'yl-util';
import { fetch } from '../../utils';
import './style.scss';

// const origin = 'https://mxgh.dundashi.com.cn';
const { origin } = window;
const api = {
  blessFriends: `${origin}/api/v3/begwish`, // 祝福好友
};
let openid = '';
const urlParams = getUrlParams(window.location.href.split('?')[1]);
if (urlParams && urlParams.id) {
  openid = window.btoa(window.btoa(`${urlParams.id}yqcmxssLcJL1l8jnlC`));
}
// const openid = 'TWpJME9USXdPSGx4WTIxNGMzTk1ZMHBNTVd3NGFtNXNRdz09';

export default class BlessFriends extends Component {
  state = {
    blessList: [
      {
        blessValue1: '', // 祝福好友
        blessValue2: '', // 祝福好友
        blessValue3: '', // 祝福好友
        blessValue4: '', // 祝福好友
        blessValue5: '', // 祝福好友
        blessedValue: '', // 被祝福好友
      },
    ],
  }

  // 祝福好友
  blessFriends = (index) => {
    const { blessList } = this.state;
    Object.keys(blessList[index]).forEach((key, i) => {
      if (key !== 'blessedValue' && blessList[index][key] && blessList[index].blessedValue) {
        setTimeout(() => {
          this.blessFriend(blessList[index][key], blessList[index], blessList[index].blessedValue);
        }, 1000 * i);
      }
    });
  }

  handleChange = ({ key, index }, e) => {
    const { blessList } = this.state;
    blessList[index][key] = e.target.value;
    this.setState({ blessList });
  }

  addBless = () => {
    const { blessList } = this.state;
    const item = {
      blessValue1: '', // 祝福好友
      blessValue2: '', // 祝福好友
      blessValue3: '', // 祝福好友
      blessValue4: '', // 祝福好友
      blessValue5: '', // 祝福好友
      blessedValue: '', // 被祝福好友
    };
    blessList.push(item);
    this.setState({ blessList });
  }

  // 祝福好友
  async blessFriend(id, blessedId) {
    const params = {
      openid: window.btoa(window.btoa(`${blessedId}yqcmxssLcJL1l8jnlC`)),
      share_openid: window.btoa(window.btoa(`${id}yqcmxssLcJL1l8jnlC`)),
    };
    const response = await fetch(`${api.blessFriends}`, {
      method: 'POST',
      body: params,
    });
    if (response.status === 1) {
      message.success(`${response.msg}, ${id}`);
    } else {
      message.error(response.msg || '接口返回异常');
    }
  }

  render() {
    const { blessList } = this.state;
    return (
      <div className="bless-friends">
        <Button type="primary" onClick={this.addBless}>添加一组祝福</Button>
        {
          blessList.map(({ blessValue1, blessValue2, blessValue3, blessValue4, blessValue5, blessedValue }, index) => (
            <div className="bless-friends-item">
              <div className="blessed-input-container">
                自己的ID：<Input value={blessedValue} onChange={this.handleChange.bind(this, { key: 'blessedValue', index })} placeholder="请输入自己的ID" />
              </div>
              <div className="bless-input-container">
                需要点祝福的ID：
                <Input value={blessValue1} onChange={this.handleChange.bind(this, { key: 'blessValue1', index })} placeholder="祝福好友ID" />
                <Input value={blessValue2} onChange={this.handleChange.bind(this, { key: 'blessValue2', index })} placeholder="祝福好友ID" />
                <Input value={blessValue3} onChange={this.handleChange.bind(this, { key: 'blessValue3', index })} placeholder="祝福好友ID" />
                <Input value={blessValue4} onChange={this.handleChange.bind(this, { key: 'blessValue4', index })} placeholder="祝福好友ID" />
                <Input value={blessValue5} onChange={this.handleChange.bind(this, { key: 'blessValue5', index })} placeholder="祝福好友ID" />
                <Button type="primary" onClick={this.blessFriends.bind(this, index)}>祝福</Button>
              </div>
            </div>
          ))
        }
      </div>
    );
  }
}
